import { Icon } from "@iconify/react";
import styled from "styled-components";

const Styled = styled.div`
  .title {
    display: flex;
    align-items: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
    font-size: 6rem;
    span {
      margin-left: 3rem;
      font-weight: 700;
    }
  }
  .top-blockquote {
    line-height: 7rem;
    font-size: 3.75rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 4rem;
    padding-right: 4rem;
    background-color: rgba(236, 247, 254, 1);
    border-top-left-radius: 1.25rem;
    border-bottom-left-radius: 1.25rem;
    border-color: rgba(73, 177, 245, 1);
    border-left-width: 3px;
    border-left-style: solid;
  }
  .bottom-blockquote {
    line-height: 7rem;
    font-size: 3.75rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 4rem;
    padding-right: 4rem;
    background-color: rgba(236, 247, 254, 1);
    border-top-left-radius: 1.25rem;
    border-bottom-left-radius: 1.25rem;
    border-color: rgba(73, 177, 245, 1);
    border-left-width: 3px;
    border-left-style: solid;
    margin-bottom: 7.5rem;
  }
  .center {
    font-size: 4rem;
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
`;

const AddLink = () => {
  return (
    <Styled>
      <p className="title">
        <Icon color="skyblue" icon="mdi:link-variant-plus" />
        <span>申请友链</span>
      </p>
      <blockquote className="top-blockquote">
        <p>名称：大卓的个人博客</p>
        <p>简介：往事随风而去</p>
        <p>
          头像：https://static.talkxj.com/photos/b553f564f81a80dc338695acb1b475d2.jpg
        </p>
      </blockquote>
      <p className="center">需要交换友链的在下方留言💖:</p>
      <blockquote className="bottom-blockquote">
        友链信息展示需要，您的信息格式要包含：名称、介绍、链接、头像
      </blockquote>
    </Styled>
  );
};

export default AddLink;
